<ui:composition template="/WEB-INF/template_page.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" xmlns:b="http://bootsfaces.net/ui">
	
	<ui:define name="custom_css">
		<link href="#{request.contextPath}/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
		<link href="#{request.contextPath}/css/createevent.css" rel="stylesheet" />
	</ui:define>

	<ui:define name="title">
        MeteoCal - Create Event
    </ui:define>

	<ui:define name="content">
		<div class="col-md-10 col-md-offset-1">
			<div class="page-header">
				<h1>Create Event</h1>
			</div>
			
			<h:form class="form-horizontal" role="form">
				<fieldset>
		
					<div class="col-md-5">					
						<div class="form-group">
							<label class="col-sm-3 control-label" for="event-name">Event Name</label>
							<div class="col-sm-9">
								<p:inputText type="text" class="form-control" name="event-name" id="event-name" placeholder="Event name" value="#{eventCreationBean.event.name}" />
							</div>
						</div>
								
						<div class="form-group">
							<label class="col-sm-3 control-label" for="event-descr">Event Description</label>
							<div class="col-sm-9">
								<p:inputTextarea type="text" class="form-control" name="event-descr" id="event-descr" placeholder="Event Description" value="#{eventCreationBean.event.description}" />
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-3 control-label" for="event-location">Event Location</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" name="event-location" id="event-location" placeholder="Event location" />
								<b:selectOneMenu class="form-control select-location" id="select-location" value="#{eventCreationBean.event.location}" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label" for="day">Date and Time</label>
							<div class="col-sm-9">
								<div class="input-append date form_datetime">
									<p:inputText class="form-control" size="16" type="text" readonly="readonly" value="#{eventCreationBean.event.dateString}" />
									<span class="add-on"><i class="icon-th"></i></span>
								</div>
							</div>
						</div>
		
						<div class="row">
							<label class="col-sm-3 control-label" for="type">Event Type</label>
							<div class="col-sm-9">
								<!-- <div class="btn-group" data-toggle="buttons" name="type">
									<label class="btn btn-default active">
										<input type="radio" name="options" id="option1" autocomplete="off" checked="checked" /> Outdoor
									</label>
									<label class="btn btn-default">
										<input type="radio" name="options" id="option2" autocomplete="off" /> Indoor
									</label>
								</div> -->
								<p:inputSwitch onLabel="Outdoor" offLabel="Indoor" value="#{eventCreationBean.event.outdoor}" />
							</div>
						</div>
						
						<br />
		
						<div class="row">
							<label class="col-sm-3 control-label" for="privacy">Event Privacy</label>
							<div class="col-sm-9">
								<!-- <div class="btn-group" data-toggle="buttons" name="privacy">
									<label class="btn btn-default active">
										<input type="radio" name="options" id="option1" autocomplete="off" checked="checked" /> Private
									</label>
									<label class="btn btn-default">
										<input type="radio" name="options" id="option2" autocomplete="off" /> Public
									</label>
								</div> -->
								<p:inputSwitch onLabel="Public" offLabel="Private" value="#{eventCreationBean.event.public}" />
							</div>
						</div>
					</div>
		
		
					<div class="col-md-6 col-md-offset-1">		
						<div class="section-left panel panel-info">
							<div class="panel-heading">
								Available people to invite
							</div>
							
							<div class="non-invited panel-body">
								<p:selectManyMenu value="#{eventCreationBean.event.invitedUsers}" converter="userConverter" var="s" filter="true" filterMatchMode="contains" showCheckbox="true">
									<f:selectItems value="#{eventCreationBean.allUsers}" var="t" itemLabel="#{t.firstName}-#{t.lastName}" itemValue="#{t}" />												
									<p:column>
										<h:outputText value="#{s.firstName} #{s.lastName}" />
									</p:column>
								</p:selectManyMenu>
							</div>
						</div> <!-- /.user-list -->
						
						<b:commandButton class="btn btn-lg btn-success" id="submit" value="Create" action="#{eventCreationBean.create()}" ajax="true" update="@all" />
									
						<br/>
	
       					<h:messages  style="color:red"/>
					</div>
				</fieldset>
			</h:form>
		</div>
	</ui:define>
	
	<ui:define name="custom_js">
		<script src="#{request.contextPath}/js/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript">
			$(".form_datetime").datetimepicker({
				format: "dd/mm/yyyy-hh:ii"
			});
		</script>
		<script src="#{request.contextPath}/js/createevent.js"></script>
	</ui:define>
</ui:composition>